<template>
  <el-container>
    <el-header>
      <div class="header-content">
        <div>
          <img src="/public/logo.png" alt="Logo" class="logo"/>
        </div>
        <div>
          <h3>
            xcdg文档生成工具
          </h3>
        </div>
        <div class="header-right">
          <el-dropdown trigger="hover">
            <el-avatar :size="60" :src="avatarUrl" :alt="store.userName"></el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">登出</el-dropdown-item>
                <el-dropdown-item @click="changeAvatar">切换头像</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-menu-item index="/home/upload">
            <router-link to="/home/upload" class="nav-link">文件上传</router-link>
          </el-menu-item>
          <el-menu-item index="/home/data-table">
            <router-link to="/home/data-table" class="nav-link">生成记录</router-link>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {ref, watchEffect} from 'vue';
import {useRouter} from 'vue-router';
import {useAuthStore} from '../store/auth';

const router = useRouter();
const activeIndex = ref(router.path);

const store = useAuthStore();

const isCollapse = ref(false);
const avatarUrls = ['/public/avatar1.png', '/public/avatar2.png', '/public/avatar3.png',
  '/public/avatar4.png', '/public/avatar5.png', '/public/avatar6.png', '/public/avatar7.png',
  '/public/avatar8.png', '/public/avatar9.png', '/public/avatar10.png', '/public/avatar11.png',
  '/public/avatar12.png', '/public/avatar13.png', '/public/avatar14.png', '/public/avatar15.png',
  '/public/avatar16.png', '/public/avatar17.png', '/public/avatar18.png', '/public/avatar19.png',
  '/public/avatar20.png', '/public/avatar21.png', '/public/avatar22.png', '/public/avatar23.png',
  '/public/avatar24.png', '/public/avatar25.png', '/public/avatar26.png', '/public/avatar27.png',
  '/public/avatar28.png', '/public/avatar29.png', '/public/avatar30.png', '/public/avatar31.png',
  '/public/avatar32.png', '/public/avatar33.png', '/public/avatar34.png', '/public/avatar35.png',
  '/public/avatar36.png', '/public/avatar37.png', '/public/avatar38.png', '/public/avatar39.png',
  '/public/avatar40.png', '/public/avatar41.png', '/public/avatar42.png', '/public/avatar43.png',
  '/public/avatar44.png', '/public/avatar45.png', '/public/avatar46.png', '/public/avatar47.png',
  '/public/avatar48.png', '/public/avatar49.png', '/public/avatar50.png', '/public/avatar51.png',
  '/public/avatar52.png', '/public/avatar53.png', '/public/avatar54.png', '/public/avatar55.png',
  '/public/avatar56.png'];

const avatarUrl = ref(avatarUrls[Math.floor(Math.random() * avatarUrls.length)]);

// 监听路由变化，更新 activeIndex
watchEffect(() => {
  activeIndex.value = router.path;
});


const changeAvatar = async () => {
  const randomIndex = Math.floor(Math.random() * avatarUrls.length);
  avatarUrl.value = avatarUrls[randomIndex];
};

const logout = () => {
  store.logout() // 清除用户信息
  // 跳转到登录页面
  router.push('/login');
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item.is-active {
  background-color: #f0f9eb;
}

.nav-link {
  text-decoration: none;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 侧边栏折叠样式 */
.el-aside {
  transition: width 0.3s;
}

.el-menu-vertical-demo.el-menu--collapse {
  width: 64px;
}

.el-menu-vertical-demo.el-menu--collapse .el-menu-item {
  padding: 0;
}

.el-menu-vertical-demo.el-menu--collapse .el-menu-item__title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.el-menu-vertical-demo.el-menu--collapse .el-menu-item__title i {
  font-size: 18px;
}

.el-menu-vertical-demo.el-menu--collapse .el-menu-item__title span {
  display: none;
}

/* Logo 图片样式 */
.logo {
  cursor: pointer; /* 设置鼠标指针为手型 */
  width: 60px; /* 设置图片宽度 */
  height: 60px; /* 设置图片高度 */
  border-radius: 50%; /* 设置圆角 */
  overflow: hidden; /* 隐藏超出圆角的部分 */
}
</style>